<template>
  <div class="hotalbum">
    <h3>{{ title }}</h3>
    <div class="hotalbum-box">
      <div class="hot-item" v-for="(item, index) of weekData" :key="index">
        <div class="hot-image">
          <img
            :src="item.blurPicUrl"
            :alt="item.name"
            :title="
              item.name + ` ${item.alias.length !== 0 ? item.alias[0] : ''}`
            "
            @click="toAlbumDetails(item.id)"
          />
          <div class="play">
            <i
              class="iconfont icon-icon_play"
              :style="{ color: themeColor }"
            ></i>
          </div>
        </div>
        <div class="name-item">
          <p
            class="musicNmae"
            :title="
              item.name + ` ${item.alias.length !== 0 ? item.alias[0] : ''}`
            "
            @click="toAlbumDetails(item.id)"
          >
            {{ item.name }}
            <span class="alias" v-if="item.alias.length !== 0"
              >({{ item.alias[0] }})</span
            >
          </p>
          <p @click="toSingerDetails(item.artists[0].id)" class="name">
            {{ item.artists[0].name }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "hotalbum",
  components: {},
  props: {
    title: {
      type: String
    },
    themeColor: {
      type: String
    },
    weekData: {
      type: [Array, String]
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    toAlbumDetails(id) {
      this.$router.push({
        name: "albumdetails",
        query: {
          id
        }
      });
    },
    toSingerDetails(id) {
      this.$router.push({
        name: "singerdetails",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.hotalbum {
  margin-top: 1.875rem;
  h3 {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0 0.625rem;
  }
  .hotalbum-box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.875rem;
    .hot-item {
      width: 16.666%;
      padding: 0.9375rem;
      box-sizing: border-box;
      .hot-image {
        position: relative;
        width: 100%;
        height: 11.875rem;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.3125rem;
        }
        .play {
          width: 3.125rem;
          height: 3.125rem;
          border-radius: 50%;
          position: absolute;
          background: rgba(255, 255, 255, 0.5);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
          text-align: center;
          line-height: 3.125rem;
          // font-size: 1.875rem;
          transition: all 0.6s;
          opacity: 0;

          .icon-icon_play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            // font-size: 1.25rem;
            color: rgb(232, 60, 60);
          }
        }
      }
      .name-item {
        cursor: pointer;
        padding: 0.3125rem 0;
        .musicNmae {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          &:hover {
            color: #808080;
          }
          .alias {
            color: #ccc;
          }
        }
        .name {
          color: #ccc;
          &:hover {
            color: #555555;
          }
        }
      }
      .hot-image:hover .play {
        opacity: 1;
      }
    }
  }
}
</style>
